<template>
  <div class="double" :style="{ width: width }">
    <div
      class="box1"
      @click="handlerDialog(0)"
      :style="{ top: carType == 1 ? '138px' : '95px' }"
    >
      {{ glassData1.length }}
    </div>
    <div
      class="box2"
      @click="handlerDialog(1)"
      :style="{ bottom: carType == 1 ? '29px' : '40px' }"
    >
      {{ glassData2.length }}
    </div>
    <el-dialog
      title="玻璃明细"
      :visible.sync="dialogVisibleEdg"
      :header-cell-style="{ 'text-align': 'center' }"
      width="60%"
    >
      <glassTable :tableData="showTableData" />
    </el-dialog>
  </div>
</template>

<script>
import glassTable from "@/views/components/production/glassTable.vue";
export default {
  components: {
    glassTable,
  },
  props: {
    width: {
      type: String,
      default: "30%",
    },
    carType: {
      type: Number,
      default: 1,
    },
    glassData1: {
      type: Array,
      default: () => {
        return [];
      },
    },
    glassData2: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      dialogVisibleEdg: false,
      showTableData: [],
    };
  },
  methods: {
    handlerDialog(e) {
      this.dialogVisibleEdg = true;
      this.showTableData = e == 0 ? this.glassData1 : this.glassData2;
      
    },
  },
};
</script>

<style scoped>
.double {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  position: relative;
}
.box1 {
  position: absolute;
  top: 0;
  width: 100%;
  /* height: 25px; */
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  cursor: pointer;
  font-size: 24px;
  background-color: #fff;
  color: #0078d4;
}
.box2 {
  position: absolute;
  bottom: 0;
  width: 70%;
  /* height: 25px; */
    background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  cursor: pointer;
  font-size: 24px;
  /* border: 2px solid #0078d4; */
  color: #0078d4;
}
</style>
